<template>
    <div class="">
        <div class="container">
            <el-card class="box-card" shadow="never">
                <div slot="header" class="clearfix">
                    <span>接口详情</span>
                    <el-button type="primary" size="mini" style="float:right;padding: 6px 9px;margin-left:10px" @click="handlerEdit">编辑</el-button>
                </div>
                <div >
                    <el-form  ref="form"  :model="form" size="small" label-width="120px">
                    <el-row>
                        <el-col :span="24">
                            <el-form-item  label="接口名称">
                                {{form.fdName}}
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="12">
                            <el-form-item  label="接口路径">
                                {{form.fdServicePath}}
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item  label="接口key">
                                {{form.fdServiceKey}}
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="12">
                            <el-form-item  label="策略名称">
                                {{form.fdPolicyName}}
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item  label="是否开启">
                                {{form.fdEnable=='true'?'是':'否'}}
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="12">
                            <el-form-item  label="创建时间">
                                {{form.fdCreateTime}}
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="12">
                            <el-form-item  label="备注">
                                {{form.fdRemark}}
                            </el-form-item>
                        </el-col>
                    </el-row>
                    </el-form>
                </div>
            </el-card>
            <el-card class="box-card" shadow="never">
                <!-- <div slot="header" class="clearfix" >
                    <el-input size="mini"  v-model="keyword" placeholder="筛选名称" class="handle-input mr10"></el-input>
                    <el-button size="mini"  type="primary" icon="search" @click="query">筛选</el-button>
                </div> -->
                <div >
                    <el-table style="width:100%"  :data="tableData.records" border  :header-cell-style="{background:'#F5F7FA'}" ref="multipleTable" >
                        <el-table-column type="index" label="序号" align="center" width="50"/>
                            <el-table-column prop="fdCreateTime" align="center" :formatter="dateFormat" label="请求时间" width="150"/>
                            <el-table-column prop="fdServiceIp" align="center" label="接口IP" width="150"/>
                            <el-table-column prop="fdExecuteResult" align="center" label="执行结果" width="150"/>
                            <el-table-column prop="fdExecuteTime" align="center" label="执行时间(毫秒)" width="150"/>
                        <el-table-column label="操作" align="center">
                            <template slot-scope="scope">
                                <el-button type="primary" size="mini" @click="handleViewParam(scope.row)">查看请求参数</el-button>
                                <el-button type="danger" size="mini" @click="handleViewErrMsg(scope.row)">查看报错信息</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                    <div class="pagination">
                        <el-pagination background @current-change="handleCurrentChange" :page-size="tableData.size" layout="prev, pager, next" :total="tableData.total"/>
                    </div> 
                </div>
            </el-card>
        </div>
        <el-dialog title="请求参数查看" :visible.sync="paramDialogVisible" :modal="true" :show-close="false">
            <codemirror v-model="formatJSON" :options="options" v-if="paramDialogVisible" />
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" size="mini" @click="closeParam">关 闭</el-button>
            </div>
        </el-dialog>
        <el-dialog title="错误信息查看" :visible.sync="errMsgDialogVisible" :modal="true" :show-close="false" width="70%">
            <codemirror v-model="errMsgValue" :options="options" v-if="errMsgDialogVisible" />
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" size="mini" @click="closeErrMsg">关 闭</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script>
import {view} from '@/components/mixins/form';
import dateUtil from '@/utils/dateUtils';
import {codemirror} from 'vue-codemirror';
// 核心样式
import 'codemirror/lib/codemirror.css';
// 引入主题后还需要在 options 中指定主题才会生效
import 'codemirror/theme/dracula.css';
import 'codemirror/mode/javascript/javascript'
export default {
    name: "sysRestMainView",
    components: {
        codemirror
    },
    data() {
        return {
            editUrl:'/sys/rest/sys_rest_main/edit',
            fetchUrl:'/api/sys/rest/sys_rest_main',
            logListUrl:'/api/sys/rest/sys_rest_log/list',
            form: {
                fdId:'',
                fdCreateTime:'',
                fdName:'',
                fdEnable:'',
                fdServicePath:'',
                fdServiceKey:'',
                fdPolicyId:'',
                fdPolicyName:'',
                fdRemark:''
            },
            tableData:{
                keyword: '',
                size:0,
                total:0,
                current:1,
                records: []
            },
            keyword: '',
            paramDialogVisible:false,
            errMsgDialogVisible:false,
            paramValue:'',
            errMsgValue:'',
            // 默认配置
            options: {
                tabSize: 2, // 缩进格式
                theme: 'dracula', // 主题，对应主题库 JS 需要提前引入
                lineNumbers: true, // 显示行号
                line: true,
                styleActiveLine: true, // 高亮选中行
                mode: 'text/x-java',
                hintOptions: {
                    completeSingle: true // 当匹配只有一项的时候是否自动补全
                }
            }
        }
    },
    mixins:[view],
    mounted(){
        this.$nextTick(()=>{
            this.getTableData();
        })
    },
    methods:{
        handleCurrentChange(val){
            this.tableData.current = val;
            this.tableData.keyword = this.keyword;
            this.getTableData();
        },
        getTableData(){
            const queryObj = {
                keyword: this.tableData.keyword,
                current: this.tableData.current
            };
            this.$post(this.logListUrl,queryObj).then((res) => {
                this.tableData = res.data;
            });
        },
        query(){
            this.tableData.keyword = this.keyword;
            this.getTableData();
        },
        dateFormat(obj){
            return dateUtil.format(obj.fdCreateTime);
        },
        handleViewParam(row){
            this.paramValue = row.fdParam;
            this.paramDialogVisible = true;
            this.options.mode='application/json';
        },
        handleViewErrMsg(row){
            this.options.mode='text/x-java';
            this.errMsgValue = row.fdErrorInfo;
            this.errMsgDialogVisible = true;
        },
        closeErrMsg(){
            this.errMsgValue = '';
            this.errMsgDialogVisible = false;
        },
        closeParam(){
            this.paramValue = '';
            this.paramDialogVisible = false;
        },

        
        
    },
    computed:{
        formatJSON(){
            const jsonObj = JSON.parse(this.paramValue);
            return JSON.stringify(jsonObj, null, "  ");
        }
    }
}
</script>
<style scoped >
@import "~@/assets/css/form.css";
@import "~@/assets/css/list.css";
.box-card{
  margin-bottom:15px;
}
</style>